/**
 * xiongsha
 * 订单详情
 * 20200523
 */

import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { Modal, Toast } from 'antd-mobile';
import Header from '@src/components/common/Header';
import request from '@src/utils/request';
import './style.less';

const alert = Modal.alert;
interface IContent {
  [lableProps: string]: string;
}

const OrderDetail = (props: RouteComponentProps) => {
  const [content, setContent] = useState<IContent>({});
  const phone = (props.match.params as any).phone;
  useEffect(() => {
    //   获取订单详情
    request('get', '/wp-json/ec-visit/v1/detail', {
      phone: phone,
    }).then((res) => {
      const data = res.data;
      if (data.code === 0) {
        setContent(data.data);
      } else {
        Toast.fail(data.message, 1);
      }
    });
  }, []);
  const cancel = () => {
    // 取消预约
    alert('确定取消预约申请吗？', '', [
      { text: '取消', onPress: () => console.log('cancel') },
      {
        text: '确定',
        onPress: () => {
          //   取消预约
          request('post', '/wp-json/ec-visit/v1/change_status', {
            phone: phone,
          }).then((res) => {
            const data = res.data;
            Toast.info(data.message, 1);
            props.history.push('/');
          });
        },
      },
    ]);
  };

  return (
    <>
      <Header>订单详情</Header>
      <div className="OrderDetail">
        <div className="orderNum">
          订单编号：{content.num}
          <span className="orderStatus">预约成功</span>
        </div>
        <div className="orderTime">
          <p>参观日期：{content.date} {content.time}</p>
          <p>预约日期：{content.created_at}</p>
        </div>
        <div className="orderTime">
          <p>
            类型：
            <span className="text">{content.type === '1' ? '个人用户' : '团体用户'}</span>
          </p>
          <p>
            联系人：
            <span className="text">
              {content.type === '1' ? content.name : content.group_leader_name}
            </span>
          </p>
          {content.type === '1' ? (
            <p>
              身份证：<span className="text">{content.certificate}</span>
            </p>
          ) : (
            <p>
              参观人数：<span className="text">{content.group_num}</span>
            </p>
          )}
          <p className="status">
            <img className="order-success" src={require('@src/img/icon-select.png')} alt="" />
            待检票
          </p>
        </div>
        <div className="btn" onClick={cancel}>
          取消预约
        </div>
      </div>
    </>
  );
};

export default OrderDetail;
